<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<%
	String contextRoot = request.getContextPath();
%>
<link rel="stylesheet" type="text/css"
	href="<%=contextRoot%>/js/jquery/css/redmond/jquery-ui-1.8.5.custom.css">
<title>OnCall Tracker</title>
<script src="<%=contextRoot%>/js/jquery/js/jquery-1.4.2.min.js"></script>
<script
	src="<%=contextRoot%>/js/jquery/js/jquery-ui-1.8.5.custom.min.js"></script>

<script type="text/javascript">
	var $j = jQuery.noConflict();
</script>
<script type="text/javascript"><!--
	$j(document).ready( function() {
		$j("#startDate").datepicker({ dateFormat: 'mm/dd/yy' });
		$j("#endDate").datepicker({ dateFormat: 'mm/dd/yy' });
		registerClickEvent('oncallTrackerTable');
	});

	function updateTotHrs(){
		var startDt = document.getElementById("startDate").value;
		var startHrs = document.getElementById("startHrs").value;
		var endDt = document.getElementById("endDate").value;
		var endHrs = document.getElementById("endHrs").value;

		var totHrsInDay=1000*60*60;
		if(startDt != null && endDt != null){
			var stDt = new Date(startDt);
			var edDt = new Date(endDt);

			if(startHrs != null){
				var hrs = startHrs.substring(0,2);
				if(hrs > 0 && hrs < 24){
					stDt.setHours(hrs);
				}
				var mins = startHrs.substring(3);
				if(mins > 0 && mins < 60){
					stDt.setMinutes(mins);
				}
			}
			if(endHrs != null){
				var hrs = endHrs.substring(0,2);
				if(hrs > 0 && hrs < 24){
					edDt.setHours(hrs);
				}
				var mins = endHrs.substring(3);
				if(mins > 0 && mins < 60){
					edDt.setMinutes(mins);
				}
			}

			var totHrs = Math.ceil((edDt.getTime()-stDt.getTime())/totHrsInDay);
			if(totHrs > 0){
		    	document.getElementById("totalHrs").value = totHrs;
			}else if(totHrs < 0){
				alert("Start Time cannot be after End Time");
			}
		}	    
	}
	
	var globalRowIndex = 0;
	var datePickerId = 0;
</script>
</head>
<body>
<s:form action="oncalldetails" method="POST" theme="simple">
	<div id="header"
		style="position: relative; top: 0; height: 15%; background-color: #EFF0F2; text-align: center">
	<label
		style="position: absolute; font-family: Verdana; font-size: 25px; font-weight: bold; color: #000000; top: 30%; left: 40%;">
	ON-CALL TRACKER </label>
	<div style="position: relative; text-align: center; top: 15%"><s:label>
		<s:actionmessage />
		<s:fielderror />
	</s:label></div>

	</div>
	<div id="first tab"
		style="position: relative; top: 0px; left: 0px; height: 85%; width: 100%; background-color: #EFF0F2; border-bottom: 1px solid #CECECF;">
	<table id="oncallTrackerTable" cellspacing="20" align="center"
		style="position: relative;">
		<tr>
			<td><s:label value="FILE NUMBER" /></td>
			<td><s:textfield name="filenumber" readonly="true" size="30"
				value="%{fileNumber}">
			</s:textfield></td>
			<td align="right"><s:label value="NAME" /></td>
			<td><s:textfield name="name" readonly="true" size="30"
				value="%{userName}">
			</s:textfield></td>
			<td align="right"><s:label value="ROLE" /></td>
			<td><s:textfield name="role" readonly="true" size="30"
				value="%{role}">
			</s:textfield></td>
		</tr>
		<tr>
			<td><s:label value="REPORTING MANAGER" /></td>
			<td><s:textfield name="reportingmgr" readonly="true" size="30"
				value="%{reportingMgr}">
			</s:textfield></td>
			<td align="right"><s:label value="IBU" /></td>
			<td><s:textfield name="ibu" readonly="true" size="30"
				value="%{ibu}">
			</s:textfield></td>
			<td align="right"><s:label value="SUB CLUSTER" /></td>
			<td><s:textfield name="subcluster" readonly="true" size="30"
				value="%{subCluster}">
			</s:textfield></td>
		</tr>
		<tr>
			<td><s:label value="MONTH" /></td>
			<td colspan="5"><s:select name="month" size="1"
				list="{'June','July'}"/></td>
		</tr>
		<tr>
			<td><s:label value="ONCALL DETAILS" /></td>
			<td colspan="5"><s:textarea rows="2" cols="120"
				name="onCallDetails"/></td>
		</tr>
		<tr>
			<td><s:label value="START DATE TIME " /></td>
			<td><s:textfield name="startDate" id="startDate" size="15" onchange="updateTotHrs();"/>
			<s:textfield name="startHrs" id="startHrs" size="6" onchange="updateTotHrs();"/></td>
			
			
			<td align="right"><s:label value="END DATE TIME " /></td>
			<td><s:textfield name="endDate" id="endDate" size="15" onchange="updateTotHrs();"/>
			<s:textfield name="endHrs" id="endHrs" size="6" onchange="updateTotHrs();"/></td>
			<td align="right"><s:label value="TOTAL EFFORT (Hrs)" /></td>
			<td><s:textfield name="totalHrs" id="totalHrs" readonly="true" size="5"/>
			</td>
		</tr>
		<tr>
			<td><s:label value="REMARKS"></s:label></td>
			<td colspan="5"><s:textarea rows="2" cols="120" name="remarks"/></td>
		</tr>
		<tr align="center">
			<td colspan="6"><s:submit name="Submit" value="Submit"/></td>
		</tr>
	</table>
	</div>
</s:form>
</body>
</html>